<link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="__CDN__/assets/css/fastadmin.min.css" />
<link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css" />
<style>
    .region-picker-panel {
        background: #fff;
    }

    .region-picker-panel .all-region {
        background: #f8f8f8;
        height: 30px;
    }

    .region-picker-panel ul {
        list-style-type: none;
        line-height: 0;
        margin-right: 50px;
    }

    .region-picker-panel .area-li {
        margin-top: 5px;
    }

    .region-picker-panel .area-li,
    .region-picker-panel .all-region {
        /*padding-left: 50px;*/
        position: relative;
        line-height: 26px;
    }

    .region-picker-panel .area-li .area-content,
    .region-picker-panel .all-region .area-content {
        /*position: absolute;*/
        /*left: 10px;*/
        /*top: 3px;*/
    }
    .all{
        position: absolute !important;
        left: 10px;
        top: 3px;
    }

    .region-picker-panel .area-li li,
    .region-picker-panel .all-region li {
        display: inline-block;
        line-height: 26px;
        position: relative;
        color: #333;
        width: 138px;
        font-size: 12px;
        box-sizing: border-box;
    }

    .region-picker-panel .area-content,
    .region-picker-panel .city-content,
    .region-picker-panel .pro-content {
        cursor: pointer;
        display: block;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .region-picker-panel .area-content input,
    .region-picker-panel .city-content input,
    .region-picker-panel .pro-content input {
        margin-right: 5px;
        cursor: pointer;
        position: relative;
        top: 1px;
        width: 14px;
        height: 14px;
        vertical-align: baseline;
    }

    .region-picker-panel .area-content span,
    .region-picker-panel .city-content span,
    .region-picker-panel .pro-content span {
        width: 26px;
        white-space: pre;
        font-size: 12px;
    }

    .region-picker-panel .area-content .num-tip,
    .region-picker-panel .city-content .num-tip,
    .region-picker-panel .pro-content .num-tip {
        position: absolute;
        /* right: -10px; */
        min-width: 20px;
        top: 0px;
        display: inline-block;
        line-height: 1.5em;
        z-index: 1;
        background: #dedede75;
        border: 1px solid #cccccc8a;
        padding: 3px 5px;
        transform: scale(0.7);
        color: #999;
        white-space: unset;
    }

    .region-picker-panel .li-province {
        display: inline-block;
        border: 1px solid #fff;
    }

    .region-picker-panel .ul-city {
        position: absolute;
        background: #fff;
        width: 310px;
        left: -1px;
        top: 100%;
        z-index: 2;
        /* line-height: 26px; */
        border: 1px solid #e4e4e4;
        padding-top: 6px;
    }

    .region-picker-panel .city-content {
        padding: 0 10px;
    }

    .region-picker-panel .li-province {
        border: 1px solid #fff;
    }

    .region-picker-panel .li-province .pro-parent {
        border: 1px solid #fff;
        display: block;
        position: relative;
        /* padding-left: 10px; */
    }

    .region-picker-panel .li-province .pro-parent .pro-shadow {
        width: 100%;
        height: 9px;
        background: #fff;
        top: 90%;
        position: absolute;
        z-index: 9;
        left: 0;
        display: none;
    }

    .region-picker-panel .li-province .pro-parent:hover {
        border: 1px solid #e4e4e4;
        background: #fff;
        z-index: 9;
        box-shadow: 0px 0px 2px #e4e4e4;
    }

    .region-picker-panel .li-province .pro-parent:hover .ul-city {
        box-shadow: 0px 0px 2px #e4e4e4;
    }

    .region-picker-panel input.checked {
        background-position: 0px 0 !important;
    }

    .region-picker-panel input.indeter {
        background-position: -45px 0 !important;
    }

    .block {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        border-bottom: 1px solid #2f88ff;
        padding-bottom: 10px;
        /* width: 100px; */
    }

    .footer {
        padding: 8px 16px;
        bottom: 0;
        position: absolute;
        border-top: 1px solid #e4e4e4;
        width: 100%;
        box-sizing: border-box;
    }

    .footer .default-bottom {
        text-align: center;
        min-width: 100px;
    }

    .footer .button {
        margin-left: 5px;
        cursor: pointer;
        width: 56px;
        min-width: 20px;
        line-height: 24px;
    }

    .footer .cancel-button {
        padding: 0 5px;
        border: 1px solid #FFF;
        min-width: 30px;
        display: inline-block;
        background: #fff;
        outline-color: #fff;
        background-image: none;
        margin-left: 2px;
        margin-right: 0px;
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('User_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-user_id" data-rule="required" data-source="user/user/index" disabled data-field="mobile" class="form-control selectpage" name="row[user_id]" type="text" value="{$row.user_id|htmlentities}">
        </div>
    </div>


    <div class="form-group">

        <label class="control-label col-xs-12 col-sm-2">设置行业/专业/级别</label>
        <div class="col-xs-12 col-sm-8">

            <div id="area_dg">
                <div class="layui-layer-content" id="areacontent">
                    <div class="region-picker-panel">
                        <div class="all-region">
                            <div class="area-content all"><label><input id="d1" type="checkbox" class="checked" value="100001">所有行业</label>
                            </div>
                        </div>



                        <ul>
                            {volist name="categoryList" id="v"}
                            <li class="area-li">
                                <div class="area-content">
                                    <label><input type="checkbox" class="checked" {in name="v['id']" value="$courses_category_ids"} checked {/in} value="{$v['id']}" name="courses_category_ids[]">{$v['name']}:</label>
                                </div>
                                <ul>
                                    {volist name="v.two" id="vv"}
                                    <li class="li-province">
                                        <div class="pro-parent">
                                            <div class="pro-shadow"></div>
                                            <div class="pro-content">
                                                <label><input type="checkbox" class="checked" {in name="vv['id']" value="$mechanism_category_top_ids"} checked {/in}    value="{$vv['id']}" name="mechanism_category_top_ids[]" >
                                                    <span>{$vv['name']}</span>
                                                </label>

                                                <!--                                                <div class="num-tip">5</div>-->
                                            </div>
                                            <ul class="ul-city" style="display: none;">
                                                {volist name="vv.three" id="vvv"}
                                                <li class="li-city">
                                                    <div class="city-content"><label>
                                                        <input  {in name="vvv['id']" value="$mechanism_category_ids"} checked {/in} type="checkbox" value="{$vvv['id']}"
                                                        class="checked"  name="mechanism_category_ids[]">
                                                        <span title="{$vvv.name}">{$vvv.name}</span></label></div>
                                                </li>
                                                {/volist}

                                            </ul>
                                        </div>
                                    </li>
                                    {/volist}
                                </ul>
                            </li>
                            {/volist}
                        </ul>







                    </div>
                </div>
            </div>

        </div>


    </div>



    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Legal_person')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-legal_person" class="form-control" name="row[legal_person]" type="text" value="{$row.legal_person|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Set_date')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-set_date" class="form-control" name="row[set_date]" type="text" value="{$row.set_date|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" class="form-control" name="row[price]" type="number" value="{$row.price|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Address')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-address" class="form-control" name="row[address]" type="text" value="{$row.address|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-type" class="form-control selectpicker" name="row[type]">
                {foreach name="typeList" item="vo"}
                <option value="{$key}" {in name="key" value="$row.type"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Banner_image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-banner_image" class="form-control" size="50" name="row[banner_image]" type="text" value="{$row.banner_image|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-banner_image" class="btn btn-danger faupload" data-input-id="c-banner_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-banner_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-banner_image" class="btn btn-primary fachoose" data-input-id="c-banner_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-banner_image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-banner_image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">机构简介:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-desc" class="form-control" rows="5" name="row[desc]" cols="50">{$row.desc|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">学员人数:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-student_count" class="form-control" name="row[student_count]" type="number" value="{$row.student_count|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">机构人数:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mechanism_count" class="form-control" name="row[mechanism_count]" type="number" value="{$row.mechanism_count|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">专业课程:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-curriculum_count" class="form-control" name="row[curriculum_count]" type="number" value="{$row.curriculum_count|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">擅长行业:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-industry_count" class="form-control" name="row[industry_count]" type="number" value="{$row.industry_count|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Style')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-style" class="form-control selectpicker" name="row[style]">
                {foreach name="styleList" item="vo"}
                <option value="{$key}" {in name="key" value="$row.style"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Style1_image1')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-style1_image1" class="form-control" size="50" name="row[style1_image1]" type="text" value="{$row.style1_image1|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-style1_image1" class="btn btn-danger faupload" data-input-id="c-style1_image1" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-style1_image1"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-style1_image1" class="btn btn-primary fachoose" data-input-id="c-style1_image1" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-style1_image1"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-style1_image1"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Style1_image2')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-style1_image2" class="form-control" size="50" name="row[style1_image2]" type="text" value="{$row.style1_image2|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-style1_image2" class="btn btn-danger faupload" data-input-id="c-style1_image2" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-style1_image2"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-style1_image2" class="btn btn-primary fachoose" data-input-id="c-style1_image2" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-style1_image2"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-style1_image2"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Style1_image3')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-style1_image3" class="form-control" size="50" name="row[style1_image3]" type="text" value="{$row.style1_image3|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-style1_image3" class="btn btn-danger faupload" data-input-id="c-style1_image3" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-style1_image3"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-style1_image3" class="btn btn-primary fachoose" data-input-id="c-style1_image3" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-style1_image3"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-style1_image3"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Style2_image1')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-style2_image1" class="form-control" size="50" name="row[style2_image1]" type="text" value="{$row.style2_image1|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-style2_image1" class="btn btn-danger faupload" data-input-id="c-style2_image1" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-style2_image1"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-style2_image1" class="btn btn-primary fachoose" data-input-id="c-style2_image1" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-style2_image1"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-style2_image1"></ul>
        </div>
    </div>
    <!--    <div class="form-group">-->
    <!--        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>-->
    <!--        <div class="col-xs-12 col-sm-8">-->
    <!--            -->
    <!--            <div class="radio">-->
    <!--            {foreach name="statusList" item="vo"}-->
    <!--            <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="$row.status"}checked{/in} /> {$vo}</label> -->
    <!--            {/foreach}-->
    <!--            </div>-->

    <!--        </div>-->
    <!--    </div>-->
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    var close = function (data) {
        var index = parent.Layer.getFrameIndex(window.name);
        var callback = parent.$("#layui-layer" + index).data("callback");
        parent.Layer.close(index);
        if (typeof callback === 'function') {
            callback.call(undefined, data);
        }
    };

    function getareavalue() {
        var txt = "";
        var val = "";
        $("#areacontent .all-region").each(function () {
            var cka = $(this).find(":checkbox");
            var labela = cka.parent().text().trim();
            if (cka.is(":checked")) {
                txt += labela + ";";
                val += cka.val() + ";";
            } else {
                $("#areacontent .pro-content").each(function () {
                    var ck = $(this).find(":checkbox");
                    var label = ck.parent().text().trim();
                    if (ck.is(":checked")) {
                        txt += label + ";";
                        val += ck.val() + ";";
                    } else {
                        $(this).next("ul").find(":checked").each(function () {
                            txt += label + "-" + $(this).parent().text().trim() + ";";
                            val += $(this).val() + ";";
                        });
                    }
                });
            }
        });
        if (txt && val) {
            txt = txt.substring(0, txt.length - 1);
            val = val.substring(0, val.length - 1);
        }
        // $("#areaname").html(txt);
        $("#areaname").val(txt);
        $("#areaval").val(val);
        // $('#area_div').hide();
        var data = {
            name: txt,
            val: val
        };
        close(data);
    }


    function showarea() {
        $("#areacontent :checkbox").each(function () {
            this.checked = false;
            $(this).attr("class", "");
        });
        var areaval = $("#areaval").val();//
        if (areaval) {
            var vals = areaval.split(";");
            for (var i = 0; i < vals.length; i++) {
                $("#areacontent :checkbox[value='" + vals[i] + "']").trigger("click");
            }
        }
        var tp = ($(window).height() - $("#area_dg").height()) / 2;
        if (tp < 0) {
            tp = 0;
        }
        $("#area_dg").css("top", tp);
    }

    $(".li-province").hover(function () {
        var $this = $(this);
        var ul = $this.find("ul");
        var li = ul.find("li");
        if (li && li.length) {
            ul.show();
        }
    }, function () {
        var $this = $(this);
        var ul = $this.find("ul");
        ul.hide();
    });

    $(function () {
        $(document).on("click", ".ensure-button", function () {
            getareavalue();
        });
        $(document).on("click", ".cancel-button", function () {
            var index = parent.Layer.getFrameIndex(window.name);
            var callback = parent.$("#layui-layer" + index).data("callback");
            parent.Layer.close(index);
        });
        $("#areacontent").find(":checkbox").on("click", function () {
            var $this = $(this);
            var ckd = $this.is(":checked");
            $this.attr("class", ckd ? "checked" : "");
            var $he = $this.parent().parent().parent();
            var lv = $he.attr("class");
            var $ul;
            if (lv == "all-region") {
                $ul = $he.next().eq(0);
            } else if (lv == "area-li") {
                $ul = $he.find("ul").eq(0);
            } else if (lv == "pro-parent") {
                $ul = $he.find("ul").eq(0);
            } else if (lv == "li-city") {}
            if ($ul) {
                $ul.find(":checkbox").each(function () {
                    this.checked = ckd;
                    $(this).attr("class", ckd ? "checked" : "");
                });
            }
            $("#areacontent .pro-content").each(function () {
                var l = $(this).next("ul").find(".li-city").length;
                var cl = $(this).next("ul").find(":checked").length;
                $(this).find(".num-tip").remove();
                var ck = $(this).find(":checkbox");
                if (cl > 0) {
                    $(this).append($("<div class='num-tip'>" + cl + "</div>"));
                    if (l >0) {
                        ck[0].checked = true;
                        ck.attr("class", "checked");
                    } else {
                        ck[0].checked = false;
                        ck.attr("class", "indeter");
                    }
                } else {
                    if (l > 0) {
                        ck[0].checked = false;
                        ck.attr("class", "");
                    } else {

                    }
                }
            });
            $("#areacontent .area-li .area-content").each(function () {
                var l = $(this).next("ul").find(".li-province").length;
                var cl = $(this).next("ul").find(".pro-content").find(":checked").length;
                var ck = $(this).find(":checkbox");
                if (cl > 0) {
                    if (l >0) {
                        ck[0].checked = true;
                        ck.attr("class", "checked");
                    } else {
                        ck[0].checked = false;
                        ck.attr("class", "indeter");
                    }
                } else {
                    if (l > 0) {
                        ck[0].checked = false;
                        ck.attr("class", "");
                    }
                }
            });
            $("#areacontent .all-region").each(function () {
                var l = $(this).next("ul").find(".area-li").length;
                var cl = $(this).next("ul").find(".area-content").find(":checked").length;
                var ck = $(this).find(":checkbox");
                if (cl > 0) {
                    if (l >0) {
                        ck[0].checked = true;
                        ck.attr("class", "checked");
                    } else {
                        ck[0].checked = false;
                        ck.attr("class", "indeter");
                    }
                } else {
                    if (l > 0) {
                        ck[0].checked = false;
                        ck.attr("class", "");
                    }
                }
            });

        });
        // showarea();
    });
</script>
